<template>
  <ul class="common-header normal navigation reset-list flex">
    <logo />
    <nuxt-link class="navigation-item motion-to-top home" to="/" exact>首页</nuxt-link>
    <nuxt-link class="navigation-item motion-to-top type" to="/type">分类</nuxt-link>
    <nuxt-link class="navigation-item motion-to-top new" to="/hot">推荐</nuxt-link>
  </ul>
</template>

<script>
import Logo from '~/components/public/Logo'
export default {
  components: { Logo }
}
</script>

<style lang="scss" scoped>
.navigation {
  --home: var(--theme);
  --type: #9b4bf7;
  --new: orangered;
  --hot: orangered;
  --search: #95da55;

  &-item {
    position: relative;
    margin: 15px 15px 15px 0;
    padding: 5px 15px;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s;
    cursor: pointer;
    z-index: 3;

    /* 当前页面激活类的样式 */
    &.nuxt-link-exact-active {
      font-weight: bold;
      color: #fff;

      &.home {
        background-color: var(--home);
      }
      &.type {
        background-color: var(--type);
      }
      &.search {
        background-color: var(--search);
      }
      &.new {
        background-color: var(--new);
      }
      &.hot {
        background-color: var(--hot);
      }
    }

    /* 底部边框颜色 */
    &.home {
      border-color: var(--theme);
    }
    &.type {
      border-color: var(--type);
    }
    &.search {
      border-color: var(--search);
    }
    &.new {
      border-color: var(--new);
    }
    &.hot {
      border-color: var(--hot);
    }

    /* 鼠标移动上去颜色色块的背景色 */
    &.home::before {
      background-color: var(--theme);
    }
    &.type::before {
      background-color: var(--type);
    }
    &.search::before {
      background-color: var(--search);
    }
    &.new::before {
      background-color: var(--new);
    }
    &.hot::before {
      background-color: var(--hot);
    }
  }
}
</style>